<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <tips optionTemplate="applyFoodList"></tips>
      <div class="hearder-search mb-10">
        <div class="toplineBox">
            <div class="toplineBox-left">

            <el-select placeholder="学年" v-model="formData.semester_id" size="small"
                    class="w-140 mr-10">
            <el-option :label="item.year" :value="item.id" v-for="(item, index) in yearList"
                    :key="index"></el-option>
            </el-select>
            <el-select placeholder="周" v-model="formData.week" size="small"
                        class="w-140 mr-10">
                <el-option :label="item.name" :value="item.id" v-for="(item, index) in weekList"
                        :key="index"></el-option>
            </el-select>
              <downexcel type="foodComment" :option="{semester_id:(formData.semester_id || ''),week:(formData.week || '')}"></downexcel>

              <el-button size="small" @click="addExcelList" icon="el-icon-upload2">导入/编辑餐品信息</el-button>
            </div>
          </div>
      </div>
      <div class="hearder-search mb-10">
        <el-button type="primary" size="small" @click="goToEdit(0)">发布点评</el-button>
        <el-button type="primary" size="small" @click="typeVisible=true" plain>每日餐品类目</el-button>
        <el-button size="small" @click="handleSizeChange(1)" plain>重置</el-button>
        <span class="allbook">总 {{ page.total }} 条数据</span>
      </div>
      <div class="table-body">
        <div class="table-body-box">
          <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableoption.tableStripe"
            :border="tableoption.tableBorder"
            tooltip-effect="dark"
            style="width: 100%">
<!--            <el-table-column-->
<!--              prop="id"-->
<!--              label="ID"-->
<!--              width="100"-->
<!--              align="center">-->
<!--            </el-table-column>-->
            <el-table-column
              prop="create_time"
              label="点评日期"
              width="120"
              align="center">
            </el-table-column>
            <el-table-column
              label="当日餐品"
              align="center">
              <template slot-scope="scope">
                <el-tag
                  :key="`${scope.$index}${tag.id}`"
                  v-for="tag in scope.row.dish"
                  class="mr-10 tag-box"
                >{{ tag.name }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="归属"
              align="center"
              width="170">
              <template slot-scope="scope">
                {{ schoolData[scope.row.school_id] && schoolData[scope.row.school_id].name }}
              </template>
            </el-table-column>
            <!--            <el-table-column-->
            <!--                label="发布时间"-->
            <!--                width="120"-->
            <!--                align="center"-->
            <!--            prop="update_time">-->
            <!--            </el-table-column>-->
            <el-table-column
              label="操作"
              width="320"
              align="center">
              <template slot-scope="scope">
                <el-button size="small" @click="handleEdit(scope.$index)">查看点评明细</el-button>
                <el-button size="small" @click="goToEdit(scope.row.id)">查看点评详情</el-button>
                <el-button size="small" @click="handleDetel(scope.row.id)" type="danger" plain>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          background
          :page-size="page.pagesize"
          :current-page="page.pageindex"
          layout="total, prev, pager, next"
          :total="page.total"
          @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>
    <footerIndexModule :visible.sync="addFooterVisible" :foodId="foodId" @InitFn="InitFn"></footerIndexModule>
    <commentPoPu :visible.sync="commentVisible" :foodId="foodId" :foodTime="foodTime"></commentPoPu>
    <dayFoodType :visible.sync="typeVisible"></dayFoodType>

    <!--    导入编辑餐品-->
    <foodPage @refreshList="InitFn" :visible.sync="addVisible" @InitFn="InitFn"></foodPage>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import footerIndexModule from "@/components/dialog/foodModule/indexModule";
import foodPage from "./components/foodPage";
import commentPoPu from "./commentPoPu";
import dayFoodType from "./components/dayFoodType";
import {mapActions} from "vuex";
import {schoolIndex} from '@/api/admin/system'
import {weekList} from '@/utils/util.js'
export default {
  components: {
    footerIndexModule,
    commentPoPu,
    dayFoodType,
    foodPage
  },
  data() {
    return {
      weekList:weekList,
      yearList:[],
      tableoption: tableoption,
      typeVisible: false,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [],
      formData:{
        semester_id:null,
        week:null
      },
      addFooterVisible: false,
      foodId: 0,
      foodTime: '',
      commentVisible: false,
      schoolData: {},
      addVisible:false
    }
  },
  created() {
    this.schoolIndexFn()
    this.InitFn()
    this.dayListFn()
  },
  methods: {
    ...mapActions(['getSemester']),
    // 导入餐品
    addExcelList() {
      this.addVisible = true;
    },
    dayListFn() {
        this.getSemester().then(res => {
            console.log(res,'res888888888888888')

            if (!res.code) {
                this.formData.semester_id = res.vo.id
                this.formData.week = res.week
            }
        });
        this.$fetch(this.api.setting.semesterIndex, {}).then((response) => {
            for (let i in response.list) {
            if (response.list[i].type === 1) {
                response.list[i].year = response.list[i].year + ' 下学期'
            } else {
                response.list[i].year = response.list[i].year + ' 上学期'
            }
            }
            this.yearList = response.list
        }).catch((err) => {
            console.log(err)
        })
    },
    schoolIndexFn() {
      schoolIndex().then(res => {
        let schoolData_ = {}
        for (let item of res.list) {
          schoolData_[item.id] = item
        }
        this.schoolData = schoolData_
      })
    },
    // 初始化
    InitFn() {
      this.$fetch(this.api.release_index, {
        p: this.page.pageindex,

      }).then((response) => {
        if (!response.code) {
          for (let i in response.list.data) {
            response.list.data[i].create_time = response.list.data[i].create_time.split(' ')[0]
            response.list.data[i].update_time = response.list.data[i].update_time.split(' ')[0]
            let dishPic = []
            for (let n in response.list.data[i].dish) {
              dishPic.push(response.list.data[i].dish[n].pic)
            }
            response.list.data[i].dishPic = dishPic
          }
          this.arryList = response.list.data
          this.page.total = response.list.total
          console.log(this.page)
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleEdit(index) {
      this.foodId = this.arryList[index].id
      this.foodTime = this.arryList[index].create_time
      this.commentVisible = true
      // this.$router.push('/CommentDetail?id=' + this.arryList[index].id)
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    goToEdit(id) {
      this.foodId = id;
      this.addFooterVisible = true
    },
    handleDetel(id) {
      this.$confirm(`确认删除该发布内容, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(id)
      }).catch(() => {
      })
    },
    detelRespon(id) {
      this.$post(this.api.food.release.delete, {id: id}).then((response) => {
        if (!response.code) {
          this.InitFn()
          this.$message.success(response.msg)
        } else {
          this.$message.error(response.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  },
  mounted() {
  },
}
</script>
<style>
.tag-box{
  margin-right: 3px !important;
}
</style>

